<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

const data = [
  {
    "name": "3000万以下",
    "value": 33.96
  },
  {
    "name": "3000万-5000万",
    "value": 15.09
  },
  {
    "name": "5000万-1亿",
    "value": 23.59
  },
  {
    "name": "1亿-5亿",
    "value": 23.6
  },
  {
    "name": "5亿以上",
    "value": 3.77
  },
]

//分割数组
const splitArray = (arr, chunkSize) => {
  let result = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result
}


onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        right: '40px',
        align: 'left',
        top: 'middle',
        data: data.map(item=>{
          return item.name
        }),
        textStyle: {
          color: '#8C8C8C'
        },
      },
      series: [
        {
          type: 'pie',
          center: ['25%', '50%'],
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    Echarts.setOption(option);

    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
